<!--
 * Description: 专案接收主页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/03/31 07:26
-->

<template>
  <BaseWrap>
    <!-- 查询条件 -->
    <BaseFunc
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query({ reload: true })"
    >
      <template>
        <!--抽屉内部查询表单-->
        <el-form class="g-advance-drawer-form" label-width="100px" :model="queryForm" size="medium">
          <el-row>
            <!--专案名称-->
            <el-col :span="8">
              <el-form-item :label="$t('Project.projectName')" label-width="150px">
                <el-input v-model="queryForm.projectName" clearable />
              </el-form-item>
            </el-col>
            <!--bu类型-->
            <el-col :span="8">
              <el-form-item :label="$t('Project.bu')" label-width="150px">
                <el-input v-model="queryForm.bu" clearable />
              </el-form-item>
            </el-col>
            <!--系列-->
            <el-col :span="8">
              <el-form-item :label="$t('Project.series')" label-width="150px">
                <el-input v-model="queryForm.series" clearable />
              </el-form-item>
            </el-col>
            <!-- 专案修改开始时间 -->
            <el-col :span="8">
              <el-form-item :label="$t('Project.startModifiedDate')" label-width="150px">
                <el-date-picker
                  v-model="queryForm.startModifiedDate"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss[.999]"
                />
              </el-form-item>
            </el-col>
            <!-- 专案修改结束时间 -->
            <el-col :span="8">
              <el-form-item :label="$t('Project.endModifiedDate')" label-width="150px">
                <el-date-picker
                  v-model="queryForm.endModifiedDate"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss[.999]"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <!--报价专案数据表格-->
    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <!--专案编号列-->
        <el-table-column
          align="center"
          :label="$t('Project.id')"
          min-width="150px"
          prop="id"
          sortable
        />
        <!--原始编号列-->
        <el-table-column
          align="center"
          :label="$t('Project.oid')"
          min-width="150px"
          prop="oid"
          sortable
        />
        <!--专案名称列-->
        <el-table-column
          align="center"
          :label="$t('Project.projectName')"
          min-width="180px"
          prop="projectName"
          sortable
        />
        <!--系列列-->
        <el-table-column
          align="center"
          :label="$t('Project.series')"
          min-width="150px"
          prop="series"
          sortable
        />
        <!--专案版本列-->
        <el-table-column
          align="center"
          :label="$t('Project.version')"
          min-width="150px"
          prop="version"
          sortable
        />
        <!--专案PM列-->
        <el-table-column
          align="center"
          :label="$t('Project.pm')"
          min-width="150px"
          prop="pm"
          sortable
        />
        <!--专案修改时间列-->
        <el-table-column
          align="center"
          :label="$t('Project.modifiedDate')"
          min-width="150px"
          prop="modifiedDate"
          sortable
        />
      </template>
      <template slot="end">
        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="250px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPer('view')"
              size="mini"
              type="text"
              @click="rowView(scope.$index, scope.row)"
            >
              <i class="el-icon-view el-icon--right"></i>
              {{ $t('button.view') }}
            </el-button>
            <el-button
              v-if="$hasPer('addToLocal')"
              size="mini"
              type="text"
              @click="rowAddToLocal(scope.$index, scope.row)"
            >
              {{ $t('button.addLocal') }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>

    <!--查看对话框-->
    <el-dialog
      v-if="viewDialogVisible"
      :append-to-body="true"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="$t('dialog.view')"
      :visible.sync="viewDialogVisible"
      width="70%"
    >
      <ProjectDataIdpView :input-data="currentEditRow" />
    </el-dialog>
  </BaseWrap>
</template>

<script>
import { projectAdd } from '@/api/quote/project'
import { idpListIdp } from '@/api/quote/idp'
import ProjectDataIdpView from './components/ProjectDataIdpView'

export default {
  name: 'ProjectDataIdp',
  components: { ProjectDataIdpView },
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 接口的所有数据数据
      listData: [],
      // 表格数据
      // tableData: [],
      // 查询表单对象
      queryForm: {
        projectName: '',
        bu: '',
        series: '',
        startModifiedDate: '',
        endModifiedDate: ''
      },
      // 新增对话框可见标识
      viewDialogVisible: false,
      // 当前编辑行的数据
      currentEditRow: {}
    }
  },
  computed: {
    tableData() {
      if (this.listData.length <= 0) {
        return []
      } else {
        const sliceIndex = this.pageSize * (this.pageNumber - 1)
        return this.listData.slice(sliceIndex, sliceIndex + this.pageSize)
      }
    }
  },
  watch: {},
  created() {
    this.pageDataInit()
  },
  methods: {
    /* 页面数据初始化*/
    pageDataInit() {
      this.query({ reload: true })
    },
    /* 查询表格数据*/
    async query(arg = {}) {
      try {
        /** reload为true，代表是首次加载或者客户主动点击查询按钮，分页查询默认为空 */
        if (!arg.reload) return
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const res = await idpListIdp(this.queryForm)
        this.listData = res.data
        this.total = this.listData.length
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 查看详情
    rowView(index, row) {
      this.currentEditRow = row
      this.viewDialogVisible = true
    },
    /* 行记录添加到本地 */
    rowAddToLocal(index, row) {
      this.$confirmBox(this.$t('button.save'), 'success')
        .then(() => {
          projectAdd(
            { ...row, projectDesc: '', projectId: row.oid },
            { msgSuccess: true, msgError: true }
          ).then(() => {})
        })
        .catch(cancel => cancel)
    }
  }
}
</script>

<style scoped></style>
